<template>
  <div style="padding-top:46px;" class="ui_joinconfirm">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="加入蜂收部落" fixed>
      <van-icon name="arrow-left" slot="left" color="#333" @click="back"/>
    </van-nav-bar>
    <div class="content">
      <div class="content_text">简单两步，即可加入蜂收部落</div>
      <div class="content_box">
        <div class="content_box_text">
          <div class="content_box_text1">
            <i class="iconfont icon-userman2"></i>
          </div>
          <div>
            <span>实名认证</span>
          </div>
        </div>
        <hr style="width:30%;">
        <div class="content_box_text">
          <div class="content_box_text2">
            <i class="iconfont icon-iconxuexisel"></i>
          </div>
          <div @click="play">
            <span>线上学习</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 第1步 -->
    <div>
      <!-- 资料审核状态 -->
      <div class="auth_content" v-if="actions === 1" >
        <div>
          <i class="iconfont icon-dengdai"></i>
        </div>
        <div class="auth_content_text">
          资料认证审核中...
        </div>
      </div>
      <div></div>
      <!-- 确认成功状态 -->
      <div class="confirm_content" v-if="actions === 2" >
        <div class="confirm_box">
          <div>
            <i class="iconfont icon-dingdanwanchengduihao_huaban"></i>
          </div>
          <div class="confirm_box_text1">
            实名认证成功
          </div>
          <div class="confirm_box_text2">
            Hi~金龟子，欢迎加入蜂收部落大家庭
          </div>
        </div>
        <!-- 确认成功状态信息区域 -->
        <div class="confirm_message">
          <div>您的基本信息</div>
          <div class="confirm_message_box">
            <span class="confirm_message_box_title">工作编号</span>
            <span>00007</span>
          </div>
          <div class="confirm_message_box">
            <span class="confirm_message_box_title">服务范围</span>
            <span>杭州市拱墅区祥符街道</span>
          </div>
        </div>
        <div class="confirm_message">
          <div>您的相关信息</div>
          <div class="confirm_message_box">
            <span class="confirm_message_box_title">废品回收点</span>
            <span>海蓝创智回收点</span>
          </div>
          <div class="confirm_message_box">
            <span class="confirm_message_box_title">联系方式</span>
            <span>海蓝创智回收点</span>
          </div>
        </div>
        <!-- 底部按钮 -->
        <div class="footer">
          <button class="footer_btn" @click="showStudy">下一步</button>
        </div>
      </div>
      <!-- 认证失败状态 -->
      <div class="fail_content" v-if="actions ===3">
        <div>
          <i class="iconfont icon-chacha"></i>
        </div>
        <div class="fail_content_text1">
          认证失败
        </div>
        <div class="fail_content_text2">
          该身份已经认证其他账号，如有疑问请咨询客服
        </div>
        <div>
          <button @click="goToJoinUs">重新认证</button>
        </div>
      </div>
    </div>
    <!-- 立即学习弹窗 -->
    <van-popup v-model="show">
      <div class="p1">刚加入蜂收部落?</div>
      <p class="p2">让我们模拟实验一次吧</p>
      <div class="van_img"><img src="../../asset/images/yindao@2x.png" alt=""></div>
      <button class="btn" @click="goToSimulation">立即学习</button>
      <audio src="../../../../public/one.mp3" autoplay></audio>
    </van-popup>
    <!-- 第2步 -->
    <div class="step2" v-show="show">
      <van-cell title="1.产品使用培训" is-link value="去培训" @click="goToStudy"/>
      <van-cell title="2.上门服务指南" is-link value="去培训"/>
      <van-cell title="3.常见问题处理" is-link value="去培训"/>
    </div>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex';
  import {
    checkIsAuth,
    saveBeeUserAuth
  } from 'services/identityAuth';
  export default {
    name: 'jionconfirm',
    data() {
      return {
        show: false,
        actions: '',
        userInfo: {
          userNo: '9663f2599f82468eb0dc5339c0a499a9',
          name: '程昆昆',
          idNumber: '411524199206156032',
          validPeriod: '1999-2009',
        },
      };
    },
    // computed: {
    //   ...mapGetters(['userInfo'])
    // },
    created() {
      this.fetchData();
    },
    methods: {
      play() {
      },
      back() {
        this.$router.go(-1);
      },
      goToStudy() {
        this.$router.push('./study');
      },
      goToSimulation() {
        this.$router.push('./simulation');
      },
      goToJoinUs() {
        this.$router.push('/joinus');
      },
      showStudy() {
        this.show = !this.show;
        this.actions = '-1';
      },
      //获取验证信息是否通过
      fetchData() {
        const { userNo } = this.userInfo;
        checkIsAuth({ userNo }).then((response) => {
          this.actions = response.object.status;
          console.log(this.actions);
          //验证成功则保存身份认证信息
          if (this.actions === 0) {
            const data = {
              userNo: this.userInfo.userNo,
              idNumber: this.userInfo.idNumber,
              name: this.userInfo.name,
              imgEmblem: '',
              imgPortrait: '',
              validPeriod: '1999-2009',
            };
            saveBeeUserAuth(data).then(({ response }) => {
              console.log(response);
            });
          }
        });
      },
    }
  };
</script>
<style lang="less">
  .ui_joinconfirm {
    .content {
      text-align: center;
      margin: 0 auto;
      background: #fff;
      padding-top: 30px;
      padding-bottom: 100px;
      .content_text {
        padding-top: 30px;
        font-size: 24px;
        color: #5c5c5c;
      }
      .content_box {
        margin-top: 30px;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        padding: 0 150px;
        .content_box_text {
          .content_box_text1 {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin-bottom: 10px;
            border: 1px solid #4993ff;
            text-align: center;
            line-height: 100px;
            .iconfont {
              font-size: 30px;
              color: #4993ff;
            }
          }
        }
        .content_box_text2 {
          width: 100px;
          height: 100px;
          border-radius: 50%;
          margin-bottom: 10px;
          border: 1px solid #aaa;
          text-align: center;
          line-height: 100px;
          .iconfont {
            font-size: 30px;
            color: #aaa;
            border: 1px solid #aaa;
          }
        }
      }
    }
    //资料审核状态
    .auth_content {
      text-align: center;
      font-size: 28px;
      background: #fff;
      min-height: 1000px;
      margin: 0 auto;
      .icon-dengdai {
        font-size: 100px;
        color: #4993ff;
      }
    }
    // 成功状态
    .confirm_content {
      background-color: #fff;
      .confirm_box {
        padding-top: 50px;
        padding-bottom: 70px;
        display: flex;
        flex-direction: column;
        align-items: center;
        .icon-dingdanwanchengduihao_huaban {
          color: green;
          font-size: 100px;
        }
        .confirm_box_text1 {
          font-size: 32px;
          margin-bottom: 20px;
        }
        .confirm_box_text2 {
          font-size: 28px;
          color: #5c5c5c;
        }
      }
      .confirm_message {
        font-size: 28px;
        padding: 0 30px;
        margin-bottom: 25px;
        .confirm_message_box {
          display: flex;
          justify-content: space-between;
          color: #333;
          margin-top: 16px;
        }
        .confirm_message_box_title {
          color: #5c5c5c;
        }
      }
      .footer {
        margin-top: 90px;
        height: 160px;
        background: #fff;
        padding: 35px 30px;
        font-size: 36px;
        border-top: 1px solid #e1e1e1;
        .footer_btn {
          width: 690px;
          height: 90px;
          color: white;
          background-color: rgb(247, 165, 40);
          border: none;
          border-radius: 50px;
        }
      }
    }
    // 失败状态
    .fail_content {
      text-align: center;
      margin: 0 auto;
      min-height: 1000px;
      background: #fff;
      .icon-chacha {
        color: red;
        font-size: 100px;
      }
      .fail_content_text1 {
        font-size: 32px;
      }
      .fail_content_text2 {
        font-size: 28px;
        color: #5c5c5c;
      }
      button {
        width: 690px;
        height: 90px;
        border-radius: 50px;
        background: #f7a427;
        color: #fff;
        font-size: 32px;
        border: 1px solid #f7a427;
        margin-top: 30px;
      }
    }
    .step2 {
      margin-top: 20px;
    }
    //立即学习弹窗
    .van-popup {
      width: 560px;
      height: 642px;
      text-align: center;
      margin: 0 auto;
      padding-top: 70px;
      .p1 {
        font-size: 40px;
        color: #333;
      }
      .p2 {
        font-size: 32px;
      }
      .van_img {
        width: 227px;
        height: 223px;
        margin: 0 auto;
      }
      .btn {
        width: 478px;
        height: 90px;
        background: #f7a427;
        color: #fff;
        font-size: 36px;
        border-radius: 50px;
        border: none;
        margin-top: 20px;
      }
    }
  }
</style>
